{% extends 'front/user_info_manage/base_user_info.html' %}

{% block css %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/address/ydui.css') }}">
    <script src="{{ url_for('static', filename='js/address/ydui.flexible.js') }}"></script>
{% endblock %}

{% block main_right %}
    {% for addr in addr %}
        <div class="change-address col-md-9">
            <form method="post" action="{{ url_for('userinfo.address_change') }}">
                <div class="address col-sm-6 col-lg-offset-3">
                    <h2>修改收货人信息</h2>
                        <hr>
                        <div class="form-group"><label for="addr_name">姓名</label><input name="name" value="{{ addr.name }}" class="form-control" id="addr_name" required></div>
                        <div class="form-group"><label for="addr_tel">手机号码</label>
                            <input name="tel" id="addr_tel" required minlength="11" maxlength="11" class="form-control"
                                   pattern="[0-9]{11}" value="{{ addr.tel }}">
                        </div>
                        <div class="form-group">
                            <section class="g-flexview">
                                <section class="g-scrollview">
                                    <div class="m-cell">
                                        <div class="cell-item">
                                            <div class="cell-right cell-arrow">
                                                <label for="J_Address2">所在地区:</label>
                                                <input type="text"
                                                  class="form-control"
                                                  readonly id="J_Address2"
                                                  value="{% if addr.province %} {{ addr.province }} {{ addr.city }} {{ addr.district }} {% endif %}"
                                                       placeholder="请选择收货地址" name="address">
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </section>
                        </div>
                        <div class="form-group"><label for="details">详细地址</label><textarea class="form-control"
                                name="details" id="details">{{ addr.details }}</textarea></div>
                        <div class="form-group"><input name="_id" value="{{ addr._id }}" type="hidden"></div>
                </div>
                <div class="bottom">
                    <button class="btn btn-primary" type="submit">提 交</button>
                </div>
            </form>
        </div>
        <div>
            {% for message in get_flashed_messages() %}
                <p class="flash">{{ message }}</p>
            {% endfor %}
        </div>
    {% endfor %}
{% endblock %}

{% block js %}
    {{ super() }}
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.citys.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/address/ydui.js') }}"></script>
    <script type="text/javascript">
        /**
         * 默认调用
         */
        !function () {
            var $target = $('#J_Address');

            $target.citySelect();

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
        /**
         https://www.jb51.net/jiaoben/577191.html#downintro2
         * 设置默认值
         */
        !function () {
            var $target = $('#J_Address2');

            $target.citySelect({
            {% for addr in addr %}
                provance: "{{ addr.get('province') }}",
                city: "{{ addr.get('city') }}",
                area: "{% if addr.get('district') %}{{ addr.get('district') }}{% endif %}"
            {% endfor %}
            });

            $target.on('click', function (event) {
                event.stopPropagation();
                $target.citySelect('open');
            });

            $target.on('done.ydui.cityselect', function (ret) {
                $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
            });
        }();
    </script>
{% endblock %}